<template>
  <div class="app-container">
    <div class="filter-container">
      <stat-condition ref="condition" :stat-type="statType" @initChart="initChart"/>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import StatCondition from './components/StatCondition'

export default {
  name: 'StatError',
  directives: { waves },
  components: { StatCondition },
  data() {
    return {
      statType: 'statError'
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initChart(myChart, resultData) {
      const xAxis_data = []
      const error_data = []
      const ok_data = []
      const sum_data = []
      const error_rate = []
      for (let i = 0; i < resultData.length; i++) {
        const dateStat = resultData[i]
        xAxis_data[i] = dateStat.name
        const dateSumCount = dateStat.count
        sum_data.push(dateSumCount)
        const subStatMap = dateStat.subStatMap
        let subOk = 0
        let subError = 0
        if (subStatMap['ERROR'] != null) {
          subError = subStatMap['ERROR'].count
        }

        if (subStatMap['OK'] != null) {
          subOk = subStatMap['OK'].count
        }

        ok_data.push(subOk)
        error_data.push(subError)
        let rate = ((subError / dateSumCount) * 100)
        if (rate > 0) {
          rate = rate.toFixed(3)
        }
        error_rate.push(rate)
      }
      const option = {
        title: {
          text: this.$refs.condition.statCondition.platformName + '-鹰眼调用统计报表',
          subtext: '错误率统计'
        },
        color: ['#6ea376', '#c93436', '#c2c21a'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function(obj) {
            let html = obj[0].axisValue + '<br>'
            let sumCount = obj[0].value + obj[1].value
            let sumUnit = '次'
            if (sumCount > 10000) {
              sumCount = (sumCount / 10000).toFixed(3)
              sumUnit = '万次'
            }
            html += '总计调用:' + sumCount + sumUnit + '<br>'

            let okCount = obj[0].value
            let okUnit = '次'
            if (okCount > 10000) {
              okCount = (okCount / 10000).toFixed(3)
              okUnit = '万次'
            }
            let errCount = obj[1].value
            let errUnit = '次'
            if (errCount > 10000) {
              errCount = (errCount / 10000).toFixed(3)
              errUnit = '万次'
            }
            html += obj[0].marker + obj[0].seriesName + ':' + okCount + okUnit + '<br>'
            html += obj[1].marker + obj[1].seriesName + ':' + errCount + errUnit + '<br>'
            html += obj[2].marker + obj[2].seriesName + ':' + obj[2].value + '%'

            return html
          }
        },
        legend: {
          data: ['OK', 'ERROR']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis_data
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '调用量',
            axisLabel: {
              formatter: '{value} 次'
            }
          },
          {
            type: 'value',
            name: '错误率',
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: 'OK',
            type: 'bar',
            barWidth: 30,
            stack: 'Result',
            data: ok_data
          },
          {
            name: 'ERROR',
            type: 'bar',
            stack: 'Result',
            data: error_data,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            }
          },
          {
            name: '错误率',
            type: 'line',
            yAxisIndex: 1,
            data: error_rate,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}%'
              }
            }
            /*,
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }*/
          }
        ]
      }
      myChart.clear()
      myChart.setOption(option)
    }
  }
}
</script>
<style>
</style>

